<!-- 从业者-我的-我的订单-订单详情 -->
<template>
	<view class="container">
		<!-- 订单状态 -->
		<view class="status-card">
			<!-- <u-tag text="审核中-未支付" type="warning" size="medium"></u-tag> -->
			<text class="apply-unpaid" @click="cancelOrder">已支付</text>
			<text class="cancel-btn" @click="cancelOrder">退款</text>
		</view>

		<!-- 考证相关-->
		<view class="card" v-if="filteredJobs[0].biz_type === 1 || filteredJobs[0].biz_type === 2 ">
			<!--左边证书图片 -->
			<view class="card-left">
				<view class="job-image">
					<u-image width="60px" height="80px" :src="orderDetails.image"></u-image>
				</view>
			</view>
			<view class="card-right">
				<view class="card-header">
					<text class="card-title">{{filteredJobs.biz_name ? filteredJobs.biz_name : '考证'}}</text>
				</view>
				<view class="product-item" >
					<text class="product-name">{{filteredJobs[0].bpto_desc}}</text>
<!-- 					<text class="product-name">考证</text>
					<text class="product-long">|</text>
					<text class="product-level">四级</text>
					<text class="product-long">|</text>
					<text class="product-price">单价：￥0.00</text> -->
				</view>

<!-- 				<view class="product-item">
					<text class="product-name">培训</text>
					<text class="product-long">|</text>
					<text class="product-level">四级</text>
					<text class="product-long">|</text>
					<text class="product-price">单价：￥0.00</text>
				</view> -->
			</view>
		</view>
		
		<!-- 在线课程 -->
		<view class="card" v-else>
			<!--左边证书图片 -->
			<view class="card-left">
				<view class="job-image">
					<u-image width="60px" height="80px" :src="orderDetails.image"></u-image>
				</view>
			</view>
			<view class="card-right">
				<view class="card-header">
					<text class="card-title">{{filteredJobs.biz_name ? filteredJobs.biz_name : '在线课程'}}</text>
				</view>
				<view class="product-item" >
					<text class="product-name">{{filteredJobs[0].bpto_desc}}</text>
		<!-- 			<text class="product-long">|</text>
					<text class="product-level">{{filteredJobs[0].bpto_desc}}</text>
					<text class="product-long">|</text>
					<text class="product-price">单价：￥0.00</text> -->
				</view>
			</view>
		</view>
		

		<!-- 订单金额 -->
		<view class="money-card">			
			<view class="price-item">
				<view class="section-title">订单金额</view>
				<text>¥{{filteredJobs[0].bpto_price ? filteredJobs[0].bpto_price : 0}}</text>
			</view>
			<view class="price-item">
				<view class="section-title">积分抵扣</view>
				<text>-{{filteredJobs[0].bpto_youhuidikou ? filteredJobs[0].bpto_youhuidikou : 0 }}</text>
			</view>
		</view>

		<!-- 积分抵扣 -->	
			<view class="total-price">
				<text>实付金额：</text>
				<text class="price">￥{{this.filteredJobs[0].bpto_price-this.filteredJobs[0].bpto_youhuidikou}} </text>
			</view>


		<!-- 分割线 -->
		<u-line color="#eee" margin="20rpx 0"></u-line>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="section-title">订单信息</view>

			<view class="info-row">
				<text class="info-label">订单号</text>
				<text class="info-value">{{this.filteredJobs[0].orderinfo.orderno}}</text>
				<text class="copy-btn" @click="copyOrderNo">复制</text>
			</view>

			<view class="info-row">
				<text class="info-label">下单时间</text>
				<text class="info-value">{{this.filteredJobs[0].orderinfo.ordertime}}</text>
			</view>

			<view class="info-row">
				<text class="info-label">支付方式</text>
				<text class="info-value">{{this.filteredJobs[0].bpto_paystate==0 ? '微信支付' : '线下支付'}}</text>
			</view>
		</view>

		<!-- 底部操作按钮 -->
<!-- 		<view class="footer">
			<u-button type="primary" @click="goToPayment">立即支付</u-button>
		</view> -->
	</view>
</template>

<script>
import { toInteger } from 'lodash';

	export default {
		data() {
			return {
				orderDetails: {
					image: '/static/nav/nav-classify.png',
				},
				orderList: [],
				bptocode: '', ///订单code

			}
		},
		computed: {
			// 按条件过滤是否发布的条件
			// 0基础课程，0在线课程  1机构购买考证 2从业者购买考证 3 从业者购买题库,4购买直播课程
			filteredJobs() {
				return this.orderList.filter(item => item.bpto_code === this.bptocode);
			}			
	
		},
		onLoad(options) {
			this.bptocode = options.bptocode
			console.log('bpto:', this.bptocode)
		},
		onShow() {
			this.getMyOrder()
		},
		methods: {
			// 获取我的订单
			getMyOrder() {
				this.$u.api.queryallorder({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					// console.log('myorder:', res)
					this.orderList = []
					this.orderList = res.data.base_info				
						console.log('myorder:', this.orderList,this.filteredJobs)
				})
			},	
			
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消报名吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '已取消报名',
								icon: 'success'
							})
							// 实际项目中调用取消订单API
						}
					}
				})
			},
			copyOrderNo() {
				uni.setClipboardData({
					data: '4544554545454',
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'none'
						})
					}
				})
			},
			goToPayment() {
				uni.showToast({
					title: '跳转支付页面',
					icon: 'none'
				})
				// 实际项目中跳转到支付页面
				// uni.navigateTo({ url: '/pages/order/payment' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		padding-bottom: 120rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.status-card {
		// background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.status-title {
			font-size: 32rpx;
			font-weight: bold;
		}

		// .status-tag {
		//   /deep/ .u-tag {
		//     height: 50rpx;
		//     line-height: 50rpx;
		//   }
		// }

		.apply-unpaid {
			font-size: 32rpx;

		}

		.cancel-btn {
			border-radius: 12rpx;
			// color: #ff4d4f;
			font-size: 24rpx;
			padding: 6rpx 16rpx;
			border: 1rpx solid #000000;
			border-radius: 20rpx;
		}
	}

	.card {
		display: flex;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #c1c1c1;
		
		
		.card-left {
			width: 60px;
			height: 80px;
			margin-right: 20px;
		}

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.card-title {
				font-size: 28rpx;
				font-weight: bold;
			}


		}

		.product-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.product-name {
				font-size: 26rpx;
				color: #333;
				// width: 120rpx;
			}
			
			.product-long {
				margin: 0 5px;
			}

			.product-level {
				font-size: 26rpx;
				color: #666;
				flex: 1;
			}

			.product-price {
				font-size: 26rpx;
				color: #999;
			}
		}

		.section-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.price-item {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 10rpx;
			padding-left: 20rpx;
		}
	}
	
	// 订单金额
	.money-card {
		 background-color: #fff;
		 padding: 30rpx;
		 // margin-bottom: 20rpx;
		 border-bottom: 1px solid #c1c1c1;
		 
		 .price-item {
			 display: flex;
			 justify-content: space-between;
		 }

	}
	
	// 实付金额
	.total-price {
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx;
		// margin-top: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		
	
		.price {
			color: #ff4d4f;
			margin-left: 10rpx;
			font-weight: bold;
		}
	}
	
	// 订单信息
	.order-info {
		padding: 30rpx;
		background-color: #fff;
		.info-row {
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			
		
			.info-label {
				font-size: 26rpx;
				color: #666;
				width: 150rpx;
			}
		
			.info-value {
				font-size: 26rpx;
				color: #333;
				flex: 1;
			}
		
			.copy-btn {
				color: #2979ff;
				font-size: 24rpx;
				padding: 4rpx 12rpx;
				border: 1rpx solid #2979ff;
				border-radius: 20rpx;
			}
		}
	}
	

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);

		/deep/ .u-btn {
			height: 80rpx;
			font-size: 30rpx;
		}
	}
</style>